<!--
 * @Author: Mcc
 * @Date: 2024-07-29 17:43:55
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-08 18:38:24
 * @FilePath: \ft-apply-admin\src\views\base\login\LoginFormTitle.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<script lang="ts" setup>
import { computed, unref } from 'vue'
import { LoginStateEnum, useLoginState } from './useLogin'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const { getLoginState } = useLoginState()

const getFormTitle = computed(() => {
  const titleObj = {
    [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
    [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
    [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
    [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
    [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
  }
  return titleObj[unref(getLoginState)];

})
</script>

<template>
  <div id='login-form-title'>
    <img class='logo' src="../../../assets/images/logo.png">
    <div class='forget-wrap' v-show='getLoginState === LoginStateEnum.RESET_PASSWORD || getLoginState === LoginStateEnum.UPDATE'>
      <!-- <div class='key'>
        <div class="inner">
          <img src="../../../assets/images/login/key.png">
        </div>
      </div> -->
      <div class="color-#333 font-size-20px font-normal">身份验证重置密码</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
#login-form-title {
  width: 100%;
  text-align: center;
  margin-bottom: 80px;
  position: relative;

  .logo {
    width: 218px;
  }

  .forget-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    top:120px;
    .key {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #F5F8FF;
      display: flex;
      justify-content: center;
      align-items: center;
      .inner {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        background: #EBF0FF;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>